<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>活动预览</title>
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/activity.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/marketing.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/style_list.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/photoAlbum2.css" />
	
		<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">	
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
	
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class=container-fluid>
            <div class="row">               
                <h3>
                    <ul class="x_content_b x_floatr">
                        <li  hidden class="k_blue_btn">
                            <a href="<%=path%>/view/ui/chooseActivityTemplate">重新选模板</a>
                        </li>
                    </ul>                   
                </h3>                
               
                <div class="col-md-12 white-bg">
                    <!--内容左侧-->
                    <div class="col-md-12">
                        <ol class="k_right_btn fix" style="width:50%;">                            
                            <li id="save_share" style="width:128px"><a href="javascript:btn_save_create();" class="J_x_box">保存并创建活动</a></li>
                            <li class="s_bc"><a href="javascript:intentSave();">保存</a></li>
                            <li><a href="javascript:IntentEdit();">重新编辑</a></li>
                        </ol>
                        <div class="k_left_title" style="margin: 2% 8%;">
                            <span></span>
                            <h6 id="title">优惠活动转发有礼</h6>
                        </div>
                        <div class="mainDiv" style="float:left;margin-left:10%;">
							<div id="bgPic"
								style="background: no-repeat linear-gradient(to bottom, #FFD5AB, white); position: relative;">
								<div class="jt jt_left">
									<span style="">&lt;</span>
								</div>
								<div class="jt jt_right">
									<span style="">></span>
								</div>
								<div>
									<div id="browse_pic" align="center">
										<img id="mainPic" src="<%=path%>/images/marketing/img_p.png"
											style="/* height: 480px;  */width: 80%; padding: 10px; background-color: white; margin-top: 80px; transform: rotate(-2deg);">
									</div>
								</div>
								<div style="clear: both; height: 0.001;"></div>
								<br /> <br />
								<div id="mainContent">

								</div>
								<div style="clear: both; height: 0.001;"></div>
								<br /> <br />
							</div>
							<div style="clear: both; height: 0.001;"></div>
							<br />
							<div id="customerInfo" align="center">
							 
							</div>
							
							<div style="clear: both; height: 0.001;"></div>
							<br />
							<div style="clear: both; height: 0.001;"></div>
							<br />
							<ul class="s_footer">
					
							</ul>
						</div>
						<div style="display: none;">
							<audio id="mp3" src="" controls="controls"></audio>
						</div>
                    </div>
                    <!-- <div class="col-xs-12 col-sm-12 stern">
                                                                    zhfeat提供技术服务
                    </div> -->
                    <!--内容左侧end-->
                </div>
            </div>
        </div>
  
</div>  
    
    <!-- 立刻分享弹框 -->
   <div hidden="" class="modal inmodal fade" id="share_modal" tabindex="-1" role="dialog"  aria-hidden="true">
	    <div class="modal-dialog modal-sm">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">扫一扫立刻分享</h4>
	            </div>
	            <div class="modal-body text-center">
	               <div id="qrcode"></div>
	               <div style="margin-top:15px;margin-left:10px;margin-bottom:20px">
	                   <h5 style="float: left;width:15%;margin-top:10px">链接</h5>
	                   <input id="shortUrl" type="text" class="input form-control" style="float: left;width:55%;" readonly="readonly">
	                   <button id="btnCopy" class="btn btn-primary" type="button" style="float: left;width:25%;margin-left:5%" data-clipboard-action="copy" data-clipboard-target="#shortUrl">复制链接</button>
	               </div>
	                <div style="margin-top:10px;">
	                   <button class="btn btn-primary" type="button" style="width:25%;margin-right: 5%;margin-top: 15px;" onclick="javascript:intentSocialSms();">群发短信</button>
	               </div>
	            </div>
	        </div>
	    </div>
	</div>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="<%=path%>/js/marketing/swiper.min.js"></script>
    <script src="<%=path%>/js/marketing/mobiscroll_002.js" type="text/javascript"></script>
    <script src="<%=path%>/js/marketing/mobiscroll_004.js" type="text/javascript"></script>
    <script src="<%=path%>/js/marketing/mobiscroll.js" type="text/javascript"></script>
    <script src="<%=path%>/js/marketing/mobiscroll_003.js" type="text/javascript"></script>
    <script src="<%=path%>/js/marketing/mobiscroll_005.js" type="text/javascript"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.js"></script>
    <script>
    var picIndex = 0;
	var obj = null;
	var model_id;
	var text_info;
	var background_pic;
	var pic_url;
	var access_token=$.cookie('access_token');
	var cid=$.cookie('cid');
	var uid=$.cookie('uid');
	//微博二维码
	var weibo_qrcode;
	//微信二维码
	var weixin_qrcode;
	var music_url;
	var music_id;
	var activity_id;
	var name;
	var mobile;
	var activity_type;
    var email_flag=false;
    var weixin_flag=false;
    var weibo_flag=false;
    var job_flag=false;
    var company_flag=false;
	var mobile;
	var email;
	var weibo;
	var weixin;
	var job;
	var company;
	var activityLongUrl="";
	var open_way;
	var title;
	$(function() {
		/* obj = window.opener.obj;
		console.log(obj); */

		model_id=getQueryString("model_id");
		activity_id=getQueryString("activity_id");
		activity_type=getQueryString("type");
		if(StringEmpty(model_id)){
			$(document).attr("title","模板预览");
			$(".J_x_box").text("保存并创建活动");
			getModelDetail();
		}else{
			$(document).attr("title","活动预览");
			$("#buzhou").show();
			$(".k_blue_btn").show();
			$(".J_x_box").text("保存并分享");
			ip=returnCitySN["cip"]+','+returnCitySN["cname"];
			openWay();
			getActivityInfo(activity_id);
		}
		
		

		$(document).on("click", ".jt_right", function() {
			$("#mainPic").fadeOut(function() {
				picIndex++;
				showPic();
				$("#mainPic").fadeIn();
			});
		});

		$(document).on("click", ".jt_left", function() {
			$("#mainPic").fadeOut(function() {
				picIndex--;
				showPic();
				$("#mainPic").fadeIn();
			});
		});
	});

	function init() {
		showPic();
		/* $("#mainContent").html(obj.content);
		$("#customerInfo").html(obj.customerInfo);
		if (obj.customerInfo) {
			$("#customerInfo").after('<div class="s_get_btn">立即领取</div>');
		}
		$("#erweima_weibo2").prop("src", obj.erweima_weibo);
		$("#erweima_weixin2").prop("src", obj.erweima_weixin); */
	}

	function showPic() {
		if (picIndex > pic_url.length-1) {
			picIndex = 0;
		} else if (picIndex < 0) {
			picIndex = pic_url.length;
		}
		$("#mainPic").attr("src", pic_url[picIndex]); 
		 
		if(StringEmpty(background_pic[picIndex]))
		 $("#bgPic").css("background-image", "url(" + background_pic[picIndex] + ")"); 
	}

	function playMP3() {
		var mp3 = document.getElementById("mp3");
		mp3.src = music_url;
		mp3.load();
		mp3.play();
	}
	
	//获取模板信息
	function getModelDetail(){
		var url = "${pageContext.request.contextPath}/activityDefinedTemplate/ajaxTemplateDetail";
		$.post(url, {
			"id" : model_id,
		}, function(data) {
			
			if (data.status =="200") {
				setModelHtml(data.data);
				setCommitInfo(data.data);
				init();
			} else {
				errorDialog(data.message);
			}
		});
		
	}
	
	function setModelHtml(data){
		title=data.name;
		
		$("#title").text(title);
		
		if(StringEmpty(model_id)){
			background_pic=(data.backgroundPic).split(",");
			pic_url=(data.picUrl).split(",");
			text_info=data.textInfo;
		}else{
			text_info=data.description;
			background_pic=(data.backgroundPic).split(",");
			pic_url=(data.picUrl).split(",");
		}
		weixin_qrcode=data.weixinQrcode;
		weibo_qrcode=data.weiboQrcode;
		var background_pic_html='';
		//设置背景图片
		for(var j in background_pic){
			var id=parseInt(j)+parseInt(1); 
			var bg_pic=pic_url[j];
			background_pic_html+='<img id="mainPic" src="'+bg_pic+'"';
			background_pic_html+='style="height: 480px; width: 80%; padding: 10px; background-color: white; margin-top: 80px; transform: rotate(-2deg);">';
		}
			
		/* $('#browse_pic').val(background_pic_html);  */
		//设置内容
		$('#mainContent').html(text_info);
		if(StringEmpty(data.weixinQrcode)&&!StringEmpty(data.weiboQrcode)){
			console.log("weixin--->");
			var html_weixin='<li style="width:100%"><img id="weixin_qrcode" src="'+data.weixinQrcode+'" /><p>微信二维码</p></li>';
			$(".s_footer").append(html_weixin); 
		}else if(StringEmpty(data.weixinQrcode)){
			var html_weixin='<li><img id="weixin_qrcode" src="'+data.weixinQrcode+'" /><p>微信二维码</p></li>';
			$(".s_footer").append(html_weixin); 
		}
		
        if(StringEmpty(data.weibo_qrcode)&&!StringEmpty(data.weixinQrcode)){
        	console.log("weibo_qrcode");
        	var html_weibo='<li style="width:100%"><img id="weibo_qrcode" src="'+data.weiboQrcode+'" /><p>微博二维码</p></li>';
			$(".s_footer").append(html_weibo); 
		}else if(StringEmpty(data.weiboQrcode)){
			var html_weibo='<li><img id="weibo_qrcode" src="'+data.weiboQrcode+'" /><p>微博二维码</p></li>';
			$(".s_footer").append(html_weibo); 
		}
		if(StringEmpty(data.backgroundMusic)){
			music_id=data.backgroundMusic;
			getMusicDetail();
		}
		
		//获取音乐文件信息
		function getMusicDetail(){
			var url = "${pageContext.request.contextPath}/activityMusic/ajaxGetActivityMusicDetail";
			$.post(url, {
				"id" : music_id,
			}, function(data) {
				
				if (data.status =="200") {
					music_url=data.data.url;
					playMP3();
				} else {
					errorDialog(data.message);
				}
			});
		}
		
		var button_css=data.buttonCss;
		var button_text=data.buttonText;
		var theme_info=data.themeInfo;
		var theme_info_color=data.themeInfoColor;
		var text_info_color=data.textInfoColor;
		if(StringEmpty(text_info_color)&&button_css!="#000000")
		   $("#mainContent").css("color",text_info_color);
		
		if(StringEmpty(button_text))
		   $(".s_get_btn").html(button_text);
	}
	
	//获取活动信息
	function getActivityInfo(activity_id) {
		var url="<%=path%>/activity/ajaxActivityDetail";
		$.post(url, {
			"id" : activity_id,
		}, function(data) {
			if (data.status == 200) {
				activity_type=data.data.activityType;
				activityLongUrl=data.data.webUrl;
				setModelHtml(data.data);
				setCommitInfo(data.data);
				showPic();
			} else {
				
			}
		});

	}
	
	
	
	function setCommitInfo(data) {
		var commit_info=null;
		
		//設置提交信息按钮框
		if(StringEmpty(model_id)){
			commit_info=data.collectInfo.split(",");
		}else{
			commit_info=data.commitInfo.split(",");
		}
		if(StringEmpty(commit_info)){
			var button_html='';
			for(var i=0;i<commit_info.length;i++){
				switch (commit_info[i]) {
				case "commit_name":
					button_html+='<br><br><div class="s_name_input"><i>姓名</i><input id="name_input" type="email" /></div>';
					break;
	            case "commit_mobile":
	            	button_html+='<div class="s_name_input"><i>电话</i><input id="mobile_input" type="text" /></div>';
					break;
				case "commit_email":
					email_flag=true;
					button_html+='<div class="s_name_input"><i>邮箱</i><input id="email_input" type="email" /></div>';
					break;
	            case "commit_weibo":
	            	weibo_flag=true;
	            	button_html+='<div class="s_name_input"><i>微博</i><input id="weibo_input" type="text" /></div>';
					break;
	            case "commit_weixin":
	            	weixin_flag=true;
	            	button_html+='<div class="s_name_input"><i>微信</i><input id="weixin_input" type="text" /></div>';
					break;
	            case "commit_job":
	            	job_flag=true;
	            	button_html+='<div class="s_name_input"><i>职位</i><input id="job_input" type="text" /></div>';
					break;
	            case "commit_company":
	            	company_flag=true;
	            	button_html+='<div class="s_name_input"><i>公司</i><input id="company_input" type="text" /></div>';
					break;
				default:
					break;
				}
			}
			button_html+='<br><div id="btn_join" class="s_get_btn">'+(data.button_text!=undefined && data.button_text!="" ? data.button_text :"立刻提交" )+'</div>';
			
			 $('#customerInfo').html(button_html);
			if(StringEmpty(data.button_css)&&data.button_css!="#000000"){
				$(".s_get_btn").css("background-color",data.button_css);
			} 
		}
	}
	

    
	
	//判断字符串是否为空
	function StringEmpty(content) {
		if (content == undefined || content == "" || content == null) {
			return false;
		} else {
			return true;
		}
	}	
	//获取参数
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}

	 function showDialog(title){
			$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
			$('.s_popup_delect2,.s_consum').show().delay(1000).fadeOut();
	}
	//校验手机号码
	function validatemobile(mobile) {
		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if (mobile.length == 0) {
			showDialog('请输入手机号码！');
			document.form1.mobile.focus();
			return false;
		} else if (mobile.length != 11) {
			showDialog('请输入有效的手机号码！');
			document.form1.mobile.focus();
			return false;
		} else if (!myreg.test(mobile)) {
			showDialog('请输入有效的手机号码！');
			document.form1.mobile.focus();
			return false;
		} else {
			return true;
		}
	}
	
	 //判断打开途径
    function openWay(){
    	//微信微博
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }


        if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
            var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象

         
            if (browser.versions.ios) {

            }
            if (browser.versions.android) {
            	
            }
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //微信打开
            	open_way="weixin";
            }
            if (ua.match(/WeiBo/i) == "weibo") {
                //微博打开
            	open_way="weibo";
            }
            if (ua.match(/QQ/i) == "qq") {
            	open_way="qq";
                //qq打开
            }
            if(navigator.userAgent.indexOf("MQQBrowser")>-1){
            	open_way="qq";
            }
        } else {
        	open_way="pc";
            //否则就是PC浏览器打开
        }

    
    }
	 //重新编辑
	function IntentEdit(){
		 if(StringEmpty(model_id)){
			 window.location.href="<%=path%>/view/ui/photoAlbum?type=model&model_id="+model_id;
		 }else{
			 window.location.href="<%=path%>/view/ui/photoAlbum?type=activity&activity_id="+activity_id;
		 }
		
	}
	//保存
	function intentSave(){
		if(StringEmpty(model_id)){
			setTimeout("location.href='<%=path%>/view/ui/activityTemplateList';", 1100);  
			successDialog("保存成功");
		 }else{
			 setTimeout("location.href='<%=path%>/view/ui/activityHome';", 1100);  
			 successDialog("保存成功");
		 }
	}
	//保存、分享、创建活动
	function btn_save_create(){
		if(StringEmpty(model_id)){
			window.location.href="<%=path%>/view/ui/photoAlbum?type=activity&model_id="+model_id;
		 }else{
				/*$('.x_popup').show();
		         $('.issue').show(); 
		         activateActivity();*/
				shareActivity();
		 }
	}
	
	//发送短信按钮
	function sendSMS(){
		window.location.href="<%=path%>/view/sms/choseSendObject?type=create&activityId="+activity_id;
	}
	  //激活
    function activateActivity() {
		var url = "${pageContext.request.contextPath}/activity/activate";
		$.post(url, {
			"cid" : cid,
			"uid" : uid,
			"access_token" : access_token,
			"activity_id" : activity_id,
		}, function(data) {
			
			if (data.status == 200) {
			} else {

			}
		});
	}
	
     $('.x_popup .issue span').click(function () {
          $('.x_popup').hide();
         $('.issue').hide(); 
     });
     
     function shareActivity(){
     	var url="<%=path%>/activity/ajaxLongUrlToShort";
 		$.post(url, {
 			"access_token" : access_token,
 			"cid" : cid,
 			"longUrl" : activityLongUrl,
 			"uid" : uid,
 		}, function(data) {
 			if (data.status == 200) {
 				var shortUrl=data.data;
 				$('#qrcode').html("");
 				$("#shortUrl").val(shortUrl);
           	    jQuery('#qrcode').qrcode(shortUrl);
           	    $('#share_modal').modal('show');
 			}else if(data.error_code=="20028"){
 				loginDialog();
	        	}else{
	        		errorDialog(data.message);
	        	}
 		});
     }
   //跳转到群发短信
		function intentSocialSms(){
			window.location.href="<%=path%>/view/sms/choseSendObject?type=create&activityId="+activity_id;
		}
		//复制短链
		$(document).ready(function(){    
			var clipboard = new ClipboardJS('#btnCopy');
			   clipboard.on('success', function(e) {  
				   $('#share_modal').modal('hide');
				   successDialog("复制成功");
			   });  
			   clipboard.on('error', function(e) {  
				   $('#share_modal').modal('hide');
				   successDialog("复制失败！请手动复制");
			   });  
		}) 
    </script>
    
</body>
</html>